<template>
  <div class="assist-btn-box">
    <div v-for="(button, index) in activeButtons" :key="index" class="assist-btn-box-item" @click="handleButtonClick(button.action)">
      {{ button.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface ButtonConfig {
  label: string;
  action: string;
}

const props = defineProps<{
  value: boolean;
}>();

const emit = defineEmits<{
  (e: 'concentration-plotting'): void;
  (e: 'area-plotting'): void;
  (e: 'gate-closing-analysis'): void;
  (e: 'show-video-surveillance'): void;
  (e: 'concentration-state'): void;
  (e: 'traffic-control'): void;
}>();

const concentrationButtons: ButtonConfig[] = [
  { label: '浓度标绘', action: 'concentration-plotting' },
  { label: '区域绘制', action: 'area-plotting' }
];

const defaultButtons: ButtonConfig[] = [
  { label: '关阀情况', action: 'gate-closing-analysis' },
  { label: '视频监控', action: 'show-video-surveillance' },
  { label: '浓度状态情况', action: 'concentration-state' },
  { label: '交通管制情况', action: 'traffic-control' }
];

const activeButtons = computed(() => (props.value ? concentrationButtons : defaultButtons));

const handleButtonClick = (action: string) => {
  emit(action as any);
};
</script>

<style scoped>
.assist-btn-box {
  z-index: 99;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  color: #fff;
  font-weight: 800;
}

.assist-btn-box-item {
  cursor: pointer;
  text-align: center;
  line-height: 38px;
  width: 127px;
  height: 38px;
  margin: 0 10px;
  font-size: 20px;
  background-image: url(@/assets/largescreen/assist-btn.png);
  background-size: 100% 100%;
}
</style>
